<!--
 * @Author: chengjiang
 * @Date: 2023-10-31 18:05:28
 * @Description: 
-->

<template>
  <!-- 背景黑色 -->
  <!-- background-color: #242424 -->
  <!-- <header style="width: 100%">
  </header> -->
  <div class="common-layout">
    <el-container>
      <el-main>
        <RouterView />
      </el-main>
      <el-footer>
        <TheFooter
          msg="盘庚金业"
          :hot="hot"
          :warn="warn"
          :tel="tel"
          :address="address"
          :ip="ip"
          :wxcode="wxcode"
      /></el-footer>
    </el-container>
  </div>
</template>
<script lang="ts">
import { useRoute, RouterView } from 'vue-router'
import TheFooter from '_c/TheFooter.vue'
import { defineComponent, ref, watch } from 'vue'
import { useFooterInfoStore } from '@/stores/modules/footerInfo'
export default defineComponent({
  setup() {
    const store = useFooterInfoStore()
    const warn = ref(store.warn)
    const tel = ref(store.tel)
    const address = ref(store.address)
    const ip = ref(store.ip)
    const hot = ref(store.hot)
    const wxcode = ref(store.wxcode)
    // 监听 useFooterInfoStore 的变化
    watch(
      () => useFooterInfoStore().wxcode,
      (newState: any, oldState: any) => {
        warn.value = store.warn
        tel.value = store.tel
        address.value = store.address
        ip.value = store.ip
        hot.value = store.hot
        wxcode.value = store.wxcode
      }
    )
    return {warn, tel, address, ip, hot, wxcode }
  }
})
</script>
